import { inject, observer } from "mobx-react";
import React from "react";
import { Image, StyleSheet } from "react-native";
import { Button, Text, TouchableOpacity, View } from "react-native-ui-lib";
import { commonStyles } from "../../configs/commonStyle";
import BasePage from "../BasePage";
import ViewUtils from "../../utils/ViewUtils";
import NavigationBar from "../common/NavigationBar";
import DeviceInfo from "react-native-device-info";
import { logger, openURL } from "../../utils/util";
import { API, hotUpgradeVersionCode } from "../../configs";
import navigator from "../../utils/navigator";
import ConfirmDialog from "../common/ConfirmDialog";
import { displayName as appName } from "../../../app.json";
import { IconImage } from "../../utils";
import { isTest } from "../../configs/config";
import { Icon } from "../components";
import {isAndroid} from '../../configs/platform';

/**
 * 关于我们
 */
@inject('userStore','appStore','upgradeStore')
@observer
export default class AboutUs extends BasePage {

    constructor(props) {
        super(props);
        this.debugCount = 0
        this.state = {
            environment:'DEV',
        };
    };

   async componentDidMount() {
        super.componentDidMount();
        //测试环境
        const environment = await storage.load({
            key: 'environment',
        }).catch(logger);

        logger('环境1',environment)
        if(IsNullOrEmpty(environment) )
        {
            if(isTest){
                this.setState({environment:'DEV'})
            } else {
                this.setState({environment:'PROD'})
            }
        }
        else{
            this.setState({environment})
        }
    }

    changeEnvironment = async () => {
        const {environment}=this.state;

        if (IsNullOrEmpty(environment) || environment == 'DEV') {
            await storage.save({
                key: 'environment',
                data: 'PROD',
            }).catch(logger);
        } else {
            await storage.save({
                key: 'environment',
                data: 'DEV',
            }).catch(logger);
        }
        let config=await API();
        axios.defaults.baseURL = config.api;
        this.props.userStore.logout()
    };

    feedback = () => {
        Toast.show('待开发...')
        this.debugCount++
        if (this.debugCount >= 5) {
            this.props.appStore.setValue('isDebug', true)
            Toast.show('调试模式已开启...')
        }
    }

    downloadPackage = () => {
        const {versionInfo} = this.props.upgradeStore
        openURL({url: versionInfo && versionInfo.downloadUrl})
    }

    render() {
        const {environment,} = this.state;
        logger('环境2',isTest)
        return (
            <View useSafeArea style={commonStyles.body_primary}>
                <NavigationBar
                    leftButton={ViewUtils.getLeftButton(() => this._onBackPress())}
                    title={'关于'+appName}
                    backgroundColor={'transparent'}
                />

                <View style={commonStyles.container}>
                    <Image source={IconImage.ic_default_avatar}
                           style={{width: 96, height: 96, alignSelf: 'center', marginVertical: 20}}/>
                    <TouchableOpacity
                        onPress={() => navigator.navigate('Protocol')}
                        style={styles.item}>
                        <Text style={commonStyles.text_black000_14}>服务协议</Text>
                        <View style={{flex: 1}}></View>
                        <Image style={{width: 7, height: 12, marginLeft: 10}}
                               source={require('../../images/icon_right.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={() => navigator.navigate('Privacy')}
                        style={styles.item}>
                        <Text style={commonStyles.text_black000_14}>隐私政策</Text>
                        <View style={{flex: 1}}></View>
                        <Image style={{width: 7, height: 12, marginLeft: 10}}
                               source={require('../../images/icon_right.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={() => navigator.navigate('Logs')}
                        style={styles.item}>
                        <Text style={commonStyles.text_black000_14}>日志记录</Text>
                        <View style={{flex: 1}}></View>
                        <Image style={{width: 7, height: 12, marginLeft: 10}}
                               source={require('../../images/icon_right.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={() => this.feedback()}
                        style={styles.item}>
                        <Text style={commonStyles.text_black000_14}>意见反馈</Text>
                        <View style={{flex: 1}}></View>
                        <Image style={{width: 7, height: 12, marginLeft: 10}}
                               source={require('../../images/icon_right.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={() => this.props.upgradeStore.versionCheck(true)}
                        style={styles.item}>
                        <Text style={commonStyles.text_black000_14}>检测升级</Text>
                        <View style={{flex: 1}}></View>
                        <Text
                            style={commonStyles.text_gray_12}>v{DeviceInfo.getVersion()}.{hotUpgradeVersionCode}</Text>
                        <Image style={{width: 7, height: 12, marginLeft: 10}}
                               source={require('../../images/icon_right.png')}/>
                    </TouchableOpacity>

                    {
                        isAndroid() ?
                        (<TouchableOpacity
                            onPress={this.downloadPackage}
                            style={styles.item}>
                            <Text style={commonStyles.text_black000_14}>获取最新安装包</Text>
                            <View style={{flex: 1}}></View>
                            <Image style={{width: 7, height: 12, marginLeft: 10}}
                                source={require('../../images/icon_right.png')}/>
                        </TouchableOpacity>) : null
                    }

                    {
                        isTest ?
                          <TouchableOpacity
                            onPress={() => this.changeConfirmDialog.show('切换环境需要重新登录，确定要切换？')}
                            style={styles.item}>
                              <Text style={commonStyles.text_black000_14}>{environment=='DEV'?'测试环境':'正式环境'}</Text>
                              <View style={{flex: 1}}></View>
                              <Text
                                style={{ ...commonStyles.text_gray_14, marginRight: 10 }}>切换</Text>
                              <Icon type="AntDesign" name={"right"} size={12} color={"#BCBCBC"} />
                          </TouchableOpacity>
                          : null
                    }

                    <Button label={"退出登录"}
                            bg-primary
                            style={{ borderRadius: 5 }}
                            labelStyle={{color:'#555555',fontSize:14}}
                            marginV-20
                            marginH-15
                            onPress={() => this.confirmDialog.show("确定要退出登录吗？")}
                    />
                </View>

                <ConfirmDialog
                  ref={r => (this.confirmDialog = r)}
                  callBack={() => this.props.userStore.logout()}
                />
                <ConfirmDialog ref={r => this.changeConfirmDialog = r} callBack={() => this.changeEnvironment()}/>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        height: 50,
        backgroundColor: '#FFFFFF',
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 16,
        marginTop: 1,
    },

});
